<template>
	<div class="container-wrap">
		<div class="container regist-container">
			<div class="title">{{ $t('user_register') }}</div>
			<div class="darkbannerwrap"></div>

			<div>
				<div class="form-group">
					<input type="text" name="username" v-model="name" :placeholder="$t('username')">
				</div>

				<div class="form-group">
					<input type="password" name="password" v-model="passwd" :placeholder="$t('password')">
				</div>

				<div class="form-group">
					<input type="password" name="check_password" v-model="checkPasswd"
						:placeholder="$t('check_password')">
				</div>


				<div class="form-verification-group">
					<input id="vcode" type="text" v-model="vcode" :placeholder="$t('verification_code')"
						@keyup.enter="regist">

					<img id="vcode-img" :src="vcodeImgUrl" @click="refreshVcode">
				</div>


				<button class="submit" @click="regist">{{ $t('register') }}</button>

				<span v-show="tips" class="tips">{{ tips }}</span>
			</div>
		</div>
	</div>
</template>

<script type="module">
import { UserService, Router } from '@/common/common.object'

const timestampGetter = () => (new Date()).getTime();
// 验证码有效时间: 5分钟
const INTERVAL = 5 * 60 * 1000;


export default {
	data() {
		return {
			timestamp: timestampGetter(),

			name: null,
			passwd: null,
			checkPasswd: null,
			vcode: null,

			tips: null,
		};
	},
	created() {
		setInterval(() => this.refreshVcode(), INTERVAL);
	},
	computed: {
		vcodeImgUrl() {
			return Router.api.user.registCaptcha(this.timestamp);
		}
	},
	methods: {
		regist() {
			if (this.passwd !== this.checkPasswd) {
				this.tips = "两次密码输入不一致";
				return;
			}


			UserService.regist(this.name, this.passwd, this.vcode)
				.then(result => {
					alert("注册成功！");

					setTimeout(() => {
						location.replace(Router.page.user.login);
					}, 1000);
				}, error => {
					this.tips = error;
				});

			return false;
		},
		refreshVcode() {
			this.timestamp = timestampGetter();
		}
	}
};
</script>


<style scoped>
@import '@/assets/common_login_register_forgot.css';
</style>